// src/info/WeiChatPay.tsx
import React from 'react';
import { View, Text, StyleSheet, TouchableOpacity, Image } from 'react-native';
import { ThemedText } from '@/components/ThemedText';
import { ThemedView } from '@/components/ThemedView';
import { Linking } from 'react-native';
import { usePayContext } from '../AppContext';

export default function WeiChatPay() {
    const { item, total, list, setList, clearData } = usePayContext();

    const openWeChat = async () => {
        const wechatUrl = 'wechat://'; // or 'wechat://'

        try {
            const canOpen = await Linking.canOpenURL(wechatUrl);
            console.log(`Can open URL ${wechatUrl}:`, canOpen);

            if (canOpen) {
                await Linking.openURL(wechatUrl).then(() => {
                    console.log('Successfully opened WeChat');
                }).catch(err => {
                    console.error('Failed to open URL:', err);
                });
            } else {
                console.log("无法打开微信");
            }
        } catch (err) {
            console.error('Error checking URL scheme:', err);
        }

        const listOne = { item, total };
        console.log(listOne, 'listOne');

        // 更新 list
        setList([...list, listOne]);
    };
    const handleClearData = () => {
        console.log('清除数据');
        clearData();
    };
    return (
        <ThemedView style={styles.container}>
            <View style={styles.header}>
                <Text style={styles.headerText}>微信支付</Text>
            </View>
            <View style={styles.orderDetails}>
                <Text style={styles.orderText}>订单详情</Text>
                <View style={styles.orderItem}>
                    <Image source={{ uri: item.src }} style={styles.orderImage} />
                    <View style={styles.orderInfo}>
                        <Text style={styles.orderTitle}>{item.title || '未知商品'}</Text>
                        <Text style={styles.orderPrice}>￥{item.price || '未知价格'}</Text>
                    </View>
                </View>
                <View style={styles.orderSummary}>
                    <Text style={styles.summaryText}>总价: ￥{total || 420}</Text>
                </View>
            </View>
            <View style={styles.paymentMethod}>
                <Text style={styles.methodText}>支付方式</Text>
                <View style={styles.methodItem}>
                    <Text style={styles.methodName}>微信支付</Text>
                    <Image source={{ uri: 'https://example.com/wechat-logo.png' }} style={styles.methodIcon} />
                </View>
            </View>
            <TouchableOpacity style={styles.payButton} onPress={openWeChat}>
                <Text style={styles.payButtonText}>确认支付</Text>
            </TouchableOpacity>
            <View style={styles.listContainer}>
                

            <TouchableOpacity onPress={handleClearData}>
                    <Text >清除数据</Text>
                </TouchableOpacity>

                {list.map((order, index) => (
                    <View key={index} style={styles.listItem}>
                        <Text>{order.item.title || '未知商品'}</Text>
                        <Text>总价: ￥{order.total || 420}</Text>
                    </View>
                ))}
            </View>
        </ThemedView>
    );
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        padding: 20,
        backgroundColor: '#fff',
    },
    header: {
        alignItems: 'center',
        marginBottom: 20,
    },
    headerText: {
        fontSize: 24,
        fontWeight: 'bold',
    },
    orderDetails: {
        marginBottom: 20,
    },
    orderText: {
        fontSize: 18,
        fontWeight: 'bold',
        marginBottom: 10,
    },
    orderItem: {
        flexDirection: 'row',
        alignItems: 'center',
        marginBottom: 10,
    },
    orderImage: {
        width: 100,
        height: 100,
        marginRight: 20,
    },
    orderInfo: {
        flex: 1,
    },
    orderTitle: {
        fontSize: 16,
        marginBottom: 5,
    },
    orderPrice: {
        fontSize: 16,
        color: '#888',
    },
    orderSummary: {
        alignItems: 'flex-end',
    },
    summaryText: {
        fontSize: 18,
        fontWeight: 'bold',
    },
    paymentMethod: {
        marginBottom: 20,
    },
    methodText: {
        fontSize: 18,
        fontWeight: 'bold',
        marginBottom: 10,
    },
    methodItem: {
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'space-between',
    },
    methodName: {
        fontSize: 16,
    },
    methodIcon: {
        width: 30,
        height: 30,
    },
    payButton: {
        backgroundColor: '#1aad19',
        padding: 15,
        borderRadius: 5,
        alignItems: 'center',
    },
    payButtonText: {
        color: '#fff',
        fontSize: 18,
        fontWeight: 'bold',
    },
    listContainer: {
        marginTop: 20,
    },
    listItem: {
        marginBottom: 10,
    },
});